<template>
    <div>
        <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        <van-cell v-for="(item,index) in list.value" :key="index" :title="item.content" />
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { search } from '../../api/index.js'
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { reactive } from 'vue';
export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => { 
        console.log(val);
        
        search({ key:val }).then((res) => {
            list.value = res.page.list
            console.log(list);
            
        })
    };
    const router=useRouter()
    const onCancel = () => {
         router.back()
    };
    const list = reactive([])
    return {
      value,
      onSearch,
      onCancel,
      list
    };
  },
};
</script>

<style scoped>

</style>